{% extends "base.html" %} {% block style %}
<style></style>
{% endblock %} {% block content %}
<form method="post" enctype="multipart/form-data" class="form">
  {% csrf_token %}
  <div class="form-group row">
    <label for="1" class="col-sm-1 col-form-label">协议<span style="color:red">*</span></label>
    <div class="col-sm-10">
      <select class="form-control" id="select_type" name="select_type">
        <option value="http" {% if instance.select_type == "http" %}selected{%endif%}>http</option>
        <option value="https" {% if instance.select_type == "https" %}selected{%endif%}>https</option>
      </select>
    </div>
  </div>
  <div class="form-group row">
    <label for="1" class="col-sm-1 col-form-label">服务器名称<span style="color:red">*</span></label>
    <div class="col-sm-10">
      <input
        type="text"
        name="server_name"
        id=""
        value="{{instance.server_name}}"
        class="form-control"
        placeholder="请输入服务器名称"
        required
      />
    </div>
  </div>
  <div class="form-group row">
    <label for="ip" class="col-sm-1 col-form-label">IP<span style="color:red">*</span></label>
    <div class="col-sm-10" style="display: flex; align-items: center">
      <input
        type="text"
        name="ip"
        class="form-control"
        value="{{instance.ip}}"
        id="ip"
        required
      />
    </div>
  </div>
  <div class="form-group row">
    <label for="port" class="col-sm-1 col-form-label">端口</label>
    <div class="col-sm-10" style="display: flex; align-items: center">
      <input
        type="text"
        name="port"
        class="form-control"
        value="{{instance.port}}"
        id="port"
      />
    </div>
  </div>
  <div class="form-group row">
    <label for="desc" class="col-sm-1 col-form-label">描述</label>
    <div class="col-sm-10" style="display: flex; align-items: center">
      <input
        type="input"
        name="desc"
        class="form-control"
        value="{{instance.desc}}"
        id="desc"
      />
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-1 col-form-label"></label>
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">提交</button>
      {% if request.user.is_superuser %}
      <button type="button" class="btn btn-danger" style="margin-left:20px" id="clear_server_btn">清理服务器</button>
      {% endif %}
    </div>
  </div>
</form>
<script>
  $(document).ready(function () {
    $("#clear_server_btn").click(function () {
      createDialog("确认", "确认要清理服务器吗？", function () {
      window.location.href = "/clear_server";
    })
    });
    $("#selectType").change(function () {
      var selectValue = $(this).val();

      if (selectValue === "url") {
        $("#urlDiv").show();
        $("#url").prop("required", true);
        $("#fileDiv").hide();
        $("#htmlFile").prop("required", false);
      } else {
        $("#fileDiv").show();
        $("#htmlFile").prop("required", true);

        $("#urlDiv").hide();
        $("#url").prop("required", false);
      }
    });

    $("#selectType").trigger("change");
  });
</script>
{% endblock %}
